<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-查找条件 -->
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row type="flex" :gutter="4">
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="组织">
              <a-select v-model="form.orgId" placeholder="选择组织">
                <a-select-option :value="item.orgId" v-for="(item,index) in [{orgId:'',orgName:'选择组织'},...orgList]"
                  :key="index">{{item.orgName}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="风险级别">
              <a-input placeholder="请输入风险级别" v-model="form.dangerLevel"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
            <a-form-item label="问题类型">
              <a-input v-model="form.questionType" placeholder="填写问题类型"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
            <a-form-item label="状态">
              <a-select v-model="form.questionStatus" placeholder="选择状态">
                <a-select-option :value="item.value" v-for="(item,index) in statusList" :key="index">{{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :xs="24" :sm="6" :md="12" :lg="5" style="margin-top:6px;">
            <a-button type="primary" @click="fetchList">查询</a-button>
            <a-button style="margin-left: 10px" @click="init">重置</a-button>
            <a-button style="margin-left: 10px" @click="editOpen()">添加</a-button>
          </a-col>

        </a-row>
      </a-form>
      <!-- E-查找条件 -->


      <!-- S-表格 -->
      <a-table :columns="columns" :data-source="data" bordered :pagination="{total}" @change="tableChange">
        <template slot="answersType" slot-scope="text">
          <span>{{answersType.find(x=>x.value == text)?.name}}</span>
        </template>
        <template slot="questionStatus" slot-scope="text">{{statusList.find(x=>x.value === text)?.name}}</template>
        <template slot="action" slot-scope="record">
          <a-space>
            <a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
            <a-button danger @click="deleteTap('record?.id')">删除</a-button>
            <a-button @click="drawerOpen(record)">详情</a-button>
          </a-space>
        </template>
      </a-table>
      <!-- E-表格 -->
      <!-- S-编辑弹框 -->
      <edit-model ref="editRef" @ok="fetchList" :statusList="statusList" :answersType="answersType"
        :orgList="orgList" />
      <!-- E-编辑弹框 -->
      <!-- S-抽屉 -->
      <drawer ref="drawerRef" :statusList="statusList" :answersType="answersType" />
      <!-- E-抽屉 -->
    </div>
  </a-spin>
</template>

<script>
  import { mapState } from 'vuex'
  import { message } from 'ant-design-vue';
  import { postQuestionList, postQuestionDelete, getQuestionDetail } from "@/services"
  import { getOrgList } from "@/services"
  import editModel from "./components/edit"
  import drawer from "./components/drawer"
  export default {
    name: 'Problem',
    components: {
      editModel,
      drawer,
    },
    data() {
      return {
        // 页面状态
        show: false,
        // 表单
        form: {
          page: 1,
          limit: 10,
          questionStatus: '',
          questionType: '',
          dangerLevel: '',
          orgId: '',
        },
        // 状态列表
        statusList: [
          { name: '选择状态', value: '' },
          { name: '有效', value: 0 },
          { name: '无效', value: 1 },
        ],
        // 问题类型
        answersType: [
          { name: '选择类型', value: '' },
          { name: '单选题', value: 0 },
          { name: '多选题', value: 1 },
          { name: '问答题', value: 2 },
          { name: '填空题', value: 3 },
        ],
        // 结构
        columns: [
          {
            title: 'Id',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '答案类型',
            dataIndex: 'answersType',
            key: 'answersType',
            scopedSlots: { customRender: 'answersType' },
          },
          {
            title: '风险级别',
            dataIndex: 'dangerLevel',
            key: 'dangerLevel',
          },
          {
            title: '组织Id',
            dataIndex: 'orgIds',
            key: 'orgIds',
          },
          {
            title: '组织名称',
            dataIndex: 'orgNames',
            key: 'orgNames',
          },
          {
            title: '状态',
            dataIndex: 'questionStatus',
            key: 'questionStatus',
            scopedSlots: { customRender: 'questionStatus' },
          },
          {
            title: '问题描述',
            dataIndex: 'questionTitle',
            key: 'questionTitle',
          },
          {
            title: '问题类型',
            dataIndex: 'questionType',
            key: 'questionType',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        // 列表总数
        total: 0,
        // 表格数据
        data: [],
        // 组织列表
        orgList: [],

      }
    },
    async created() {
      // // 获取列表
      await this.fetchList()
      // 获取组织列表
      await this.fetchOrgList()
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),
    },
    methods: {
      /**
       * 初始表格数据
       */
      init() {
        this.form = this.$options.data().form // 初始化
        // 获取列表
        this.fetchList()
      },
      /**
      * 获取列表
      */
      async fetchList() {
        this.show = false
        let { code, data } = await postQuestionList(this.form)
        this.show = true
        if (code == 200) {
          this.data = data?.records
          this.total = data?.total
        }

      },
      /**
       * 打开弹框
       */
      async editOpen(e) {
        let data = e && await this.fetchDetail(e.id)
        this.$refs.editRef.open(data)
      },
      /**
       * 打开抽屉
       */
      async drawerOpen(e) {
        let data = await this.fetchDetail(e.id)
        this.$refs.drawerRef.open(data)
      },
      /**
       * 删除 
       */
      deleteTap(id) {
        let t = this
        this.$confirm({
          title: '提示',
          content: '你确定要删除吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          async onOk() {
            let res = await postQuestionDelete({
              questionId: id
            })
            if (res.code == 200) {
              message.success(res.msg)
              t.fetchList()
            } else {
              message.error(res.msg)

            }
          },
        });
      },
      /**
       * 表格回调
       */
      tableChange(e) {
        this.form.page = e.current
        this.form.limit = e.pageSize
        // 获取数据
        this.fetchList()
      },
      /**
       * 获取组织列表 
       */
      async fetchOrgList() {
        let { code, data } = await getOrgList({})
        if (code == 200) {
          this.orgList = [...data]
        }
      },
      /**
       * 获取详情
       */
      async fetchDetail(id){
        let { code, data, msg } = await getQuestionDetail({questionId:id})
        if(code == 200){
          return data
        }else{
          message.error(msg)
        }
      }
    },
  }
</script>

<style scoped lang="less">
</style>